<template>
  <div class="layout-pd">
    <zh-space>
      <zh-card title="">
        <zh-form ref="reqQueryForm" :model="state.queryParam">
          <zh-form-select
              prop="userId"
              label="操作用户姓名"
              placeholder="支持模糊查询"
              funcCode="user0013"
              searchField="fullName"
              :searchParams="state.searchParams"
              :default-fields="{
							label: 'fullName',
							value: 'userId',
						}"
              :filterable="true"
              :remote="true"
              v-model="state.queryParam.userId"
          ></zh-form-select>
          <zh-form-input prop="title" label="请求标题" placeholder="支持模糊查询" v-model="state.queryParam.title"></zh-form-input>
          <template v-if="state.advanced">
            <zh-form-select
                prop="code"
                label="成功标志"
                placeholder="请选择"
                :options="state.codeDict"
                v-model="state.queryParam.code"
            ></zh-form-select>
            <zh-form-input prop="ym" label="请求年月" placeholder="年月格式如：201901" v-model="state.queryParam.ym"></zh-form-input>
            <zh-form-date
                prop="begTimeStart"
                label="请求时间开始"
                placeholder="请输入开始时间"
                type="datetime"
                v-model="state.queryParam.begTimeStart"
            ></zh-form-date>
            <zh-form-date
                prop="begTimeEnd"
                label="请求时间结束"
                placeholder="请输入结束时间"
                type="datetime"
                v-model="state.queryParam.begTimeEnd"
            ></zh-form-date>
            <zh-form-input prop="reqBody" label="请求体" placeholder="支持模糊查询" v-model="state.queryParam.reqBody"></zh-form-input>
            <zh-form-input prop="reqApi" label="请求API" placeholder="精确查询" v-model="state.queryParam.reqApi"></zh-form-input>
          </template>
          <zh-form-query v-model="state.advanced" :form-ref="reqQueryForm" :table-ref="reqListTable">
            <el-checkbox style="margin-right: 6px" v-model="state.queryParam.isHistoryChecked" label="查询历史" size="large" />
          </zh-form-query>
        </zh-form>
      </zh-card>
      <zh-table
          ref="reqListTable"
          title=""
          funcCode="oplog0001"
          :columns="state.tableColumn"
          :disabled="false"
          highlight-current-row
      >
        <template #code_default="{ row }">
          <zh-badge :status="flagMap[row.code].status" :text="flagMap[row.code].text" />
        </template>
        <template #operate="{ row }">
          <el-button type="primary" @click="openParamInfo(row.reqBody)"> 查看详情 </el-button>
        </template>
      </zh-table>
    </zh-space>
    <zh-dialog title="请求体" width="85%" v-model="state.jsonVisible">
      <json-viewer :value="state.reqBody"> </json-viewer>
    </zh-dialog>
  </div>
</template>

<script lang="ts" setup name="UserReqLog">
//------------------定义子组件---------------------------
const reqQueryForm = ref<any>({});
const reqListTable = ref<any>({});

//------------------内部变量定义-------------------------
const flagMap = {
  '-1': {
    status: 'error',
    text: '失败',
  },
  '0': {
    status: 'success',
    text: '成功',
  },
};
const state = reactive({
  description: '用户请求日志',
  dictData: {},
  dictUser: [] as any[],
  url: '',
  searchUrl: '',
  searchParams: {
    permissionFlag: false,
  },
  form: null,
  // 高级搜索 展开/关闭
  advanced: false,
  // 查询参数
  queryParam: {} as any,
  codeDict: [
    {
      dictKey: '0',
      dictValue: '成功',
    },
    {
      dictKey: '-1',
      dictValue: '失败',
    },
  ],
  tableColumn: [
    { type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号' },
    { field: 'reqLogId', title: '请求日志Id', visible: false, fixed: 'left', align: 'center', width: 150 },
    { field: 'title', title: '请求标题', align: 'center', fixed: 'left', width: 200 },
    { field: 'reqApi', title: '请求API', align: 'center', width: 250 },
    { field: 'userId', title: '用户Id', visible: false, align: 'center', width: 150 },
    { field: 'userName', title: '用户名', align: 'center', width: 150 },
    { field: 'fullName', title: '姓名', align: 'center', width: 200 },
    { field: 'ym', title: '所属年月', align: 'center', width: 80 },
    {
      field: 'code',
      title: '成功标识',
      align: 'center',
      width: 80,
      slots: {
        default: 'code_default',
      },
    },
    { field: 'message', title: '描述', align: 'center', width: 300 },
    { field: 'begTime', title: '请求时间', align: 'center', width: 200 },
    { field: 'endTime', title: '返回时间', align: 'center', width: 200 },
    { field: 'countTime', title: '耗时（秒）', align: 'center', width: 80 },
    { field: 'routerId', title: '路由id', align: 'center', width: 150 },
    { field: 'funcId', title: '功能Id', align: 'center', width: 150 },
    { field: 'ip', title: '请求客户端IP', align: 'center', width: 150 },
    { field: 'serverIp', title: '服务器IP', align: 'center', width: 250 },
    { field: 'serverPort', title: '服务器端口', align: 'center', width: 200 },
    { field: 'servletContext', title: '服务名', align: 'center', width: 200 },
    { field: 'reqBody', title: '请求体', align: 'center', width: 350 },
    {
      field: 'action',
      title: '详情',
      align: 'center',
      showOverflow: true,
      width: 80,
      fixed: 'right',
      slots: { default: 'operate' },
    },
  ],
  isHistoryChecked: false,
  reqBody: null,
  jsonVisible: false,
});

//------------------定义调用方法-------------------------
function openParamInfo(value) {
  if (value) {
    state.reqBody = JSON.parse(value);
    state.jsonVisible = true;
  } else {
    $messageBox.error('请求体为空', '提示');
  }
}

//------------------初始化------------------------------
// 数据字典初始化
const queryParams = {};

onMounted(() => {
  nextTick(()=>{
    reqListTable.value.query(state.queryParam);
  })
});
</script>
